<template>
  <div class="homeContainer">
    <div class="wapper">
      <div class="wapper1">
        <div
          @click="activeData = 'DataAll'"
          :class="activeData === 'DataAll' ? 'active_title' : ''"
          class="title"
        >
          数据总览
        </div>
        <div
          @click="activeData = 'VideoMonitor'"
          :class="activeData === 'VideoMonitor' ? 'active_title' : ''"
          class="title"
        >
          数据监控
        </div>
      </div>
      <div class="wapper1">
        <div
          class="title"
          @click="activeData = 'NumAll'"
          :class="activeData === 'NumAll' ? 'active_title' : ''"
        >
          数据总览
        </div>
        <div
          class="title"
          @click="activeData = 'NumMonitor'"
          :class="activeData === 'NumMonitor' ? 'active_title' : ''"
        >
          数据监控
        </div>
        <div
          class="title"
          @click="activeData = 'GeneratorMonitor'"
          :class="activeData === 'GeneratorMonitor' ? 'active_title' : ''"
        >
          模拟数据生成
        </div>
      </div>
    </div>
    <component ref="conponentRef" :is="activeData"></component>
  </div>
</template>

<script>
import DataAll from "./dataAll.vue";
import NumAll from "./NumAll.vue";
import NumMonitor from "./NumMonitor.vue";
import VideoMonitor from "./VideoMonitor.vue";
import GeneratorMonitor from "@/views/GeneratorMonitor.vue";
export default {
  name: "Home",
  components: { DataAll, VideoMonitor, NumAll, NumMonitor, GeneratorMonitor },
  data() {
    return {
      activeData: "DataAll",
    };
  },
  props: {
    prop: {
      type: String,
      required: false,
    },
  },
  computed: {},
  watch: {},
  methods: {
    // type your function
  },
  created() {},
  mounted() {},
  updated() {},
  destroyed() {},
  filters: {},
};
</script>

<style scoped lang="scss">
.homeContainer {
  background-image: url("../assets/image/background.svg");
  height: 100vh;
  width: 100vw;
}
.wapper {
  display: flex;
  justify-content: space-between;
  padding: 5px 30px;
  margin-bottom: 20px;
  .wapper1 {
    display: flex;
    .title {
      color: #fff;
      padding: 0 20px;
      font-size: 18px;
      cursor: pointer;
    }
    .active_title {
      color: #4d51b0;
      background-color: #c3c7ce;
    }
  }
}
</style>
